import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, TextInput} from 'react-native';
import DataStore from '../expand/dao/DataStore';

type Props = {};
export default class DataStoreDemoPage extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      showText: ''
    };
    this.dataStore = new DataStore();
  }
  /**
   * 加载数据
   */
  loadData = () => {
    let url = `https://api.github.com/search/repositories?q=${this.searchKey}`;
    this.dataStore.fetchData(url, 'popular')
      .then(wrapData => {
        const showData = `初次数据加载时间：${new Date(wrapData.timestamp)}\n${JSON.stringify(wrapData.data)}`;
        this.setState({
          showText: showData
        })
      })
      .catch(error => {
        error && console.log(error.toString())
      })
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>数据本地化示例</Text>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={text => {
            this.searchKey = text
          }}
        />
        <Button
          title={'获取数据'}
          onPress={() => {
            this.loadData();
          }}
        />
        <Text>{this.state.showText}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});
